import React, { useState, useEffect } from "react";
import Modal from "antd/lib/modal";
import Form from "antd/lib/form";
import Input from 'antd/lib/input';
import Select from 'antd/lib/select';
import List from 'antd/lib/list';
import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
import DynamicComponent from "@/components/DynamicComponent";
import { UserProfile } from "@/components/proptypes";
import Employee from "@/services/employee";
import notification from "@/services/notification";
import { currentUser } from "@/services/auth";
const { TextArea } = Input;

function CreateEmployeeBatchMoveDialog({ selectedrowkeys, selectedrows,employeeuserdata, openseapool,sourcetype, dialog }) {
  const [dataLoaded, setDataLoaded] = useState(false);
  const [message, setmessage] = useState("");
  const [maintainer, setmaintainer] = useState(0);

  const isCreateStateEnabled = useState(true);

  useEffect(() => {
    setDataLoaded(true);
  }, [openseapool]);

  function handlemessageChange(event) {
    setmessage(event.target.value);
  }
  function handlemaintainerChange(event) {
    setmaintainer(event);
  }

  function handleSubmit() {
    if(openseapool===1){
      if(maintainer==='' || maintainer === null || maintainer === 0 || maintainer === undefined || maintainer === 'undefined'){
        notification.error("人员不能为空");
        return;
      }
    }
    let data = {
      ids: selectedrowkeys,//
      userid: currentUser.id,//--操作员ID
      openseapool: openseapool,
      maintainer: maintainer,
      message: message,
      sourcetype: sourcetype,
    }

    Employee.batchmove(data)
      .then(() => {
        dialog.close({ success: true });
      })
      .catch(error => {
        notification.error(error.message, error.detailedMessage);
      });

    dialog.close({ success: true });
  }

  return (
    <Modal
      {...dialog.props}
      {...(isCreateStateEnabled ? {} : { footer: null })}
      width={document.querySelector('body').offsetWidth * 0.4}
      title= {sourcetype ===0 ? "人员批量转移申请":"人员批量转移"}
      okText="确定"
      cancelText="取消"

      onOk={handleSubmit}
      wrapProps={{
        "data-test": "CreateDashboardDialog",
      }}>
      {dataLoaded && (
        <DynamicComponent name="CreateEmployeeBatchMoveDialogExtra" >
          <Form>
            {/* <Form.Item style={{ marginBottom: 10 }} label="类型">
              <Input
                style={{ width: 300 }}
                value={openseapool === 0 ? "转移到公海池" : "转移到私有池"}
                placeholder="状态"
                disabled="disabled"
              />
            </Form.Item> */}
            <Form.Item style={{ marginBottom: 10 }} label="人员列表">
                <List
                  dataSource={selectedrows}
                  renderItem={(item, index) => (
                            <List.Item>
                            {item.name}
                          </List.Item>
                  )}
                />
            </Form.Item>
            <Form.Item style={{ marginBottom: 10 }} label="转移给">
              <Select style={{ width: 300  }}
                showSearch
                allowClear
                optionFilterProp="children"
                value={maintainer}
                onChange={handlemaintainerChange} >
                {(employeeuserdata || []).map(item => (
                  <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                ))}
              </Select>
              <p>没有选择人员，转移到公海池</p>
            </Form.Item>
            <Form.Item style={{ marginBottom: 10 }} label="摘   要">
              <TextArea
                value={message}
                onChange={handlemessageChange}
                placeholder="摘  要"
                autoSize={{ minRows: 3, maxRows: 5 }}
              />
            </Form.Item>
          </Form>
        </DynamicComponent>
      )}
    </Modal>
  );
}

CreateEmployeeBatchMoveDialog.propTypes = {
  openseapool: UserProfile.isRequired,
  dialog: DialogPropType.isRequired,
};

export default wrapDialog(CreateEmployeeBatchMoveDialog);
